<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option ={
        color: ["#447FFD", "#00DFFF"],
        grid: {
          top: '15%',
          left: '10%',
          right: '1%',
          bottom: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: [
            {
              name: '客流量（辆）',
              textStyle: {
                color: '#447FFD',
                fontSize: 18,
              }
            },
            {
              name: '人流量（辆）',
              textStyle: {
                color: '#00DFFF',
                fontSize: 18,
              }
            }
          ],
          right: 0,
          align: 'left'

        },
        xAxis: [
          {
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            color: '#fff',
            axisTick: {
              show: false
            },
            axisLabel: {
              align: 'center',
              interval: 0,
              color: '#fff',
              textStyle: {
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ffff'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#333'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#20243D'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff', // 坐标值得具体的颜色
                fontSize: 14
              }
            }
          }
        ],
        series: [
          {
            type: 'line',
            // smooth: true, //是否平滑
            name: '客流量（辆）',
            data: [50, 80, 100, 150, 170, 140],
            label: {
              show: false
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(0,0,255,0.7)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(0,202,149,0)'
                      }
                    ],
                    false
                ),
              }
            },
          },
          {
            type: 'line',
            // smooth: true, //是否平滑
            name: '人流量（辆）',
            data: [30, 110, 70, 80, 130, 160],
            label: {
              show: false
            },
            areaStyle: {
              normal: {
                color:  this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(0,202,149,0.3)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(0,202,149,0)'
                      }
                    ],
                    false
                ),
              }
            },
          }
        ]
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
